<!-- 订阅套餐 -->
<template>
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="462"
    :before-close="handleClose"
    center
    :show-close="false"
    align-center
  >
    <template #header>
      <h5>
        {{
          type == 0 ? "Select a Plan" : type == 1 ? "Free Plan" : "Premium Plan"
        }}
      </h5>
    </template>
    <div v-if="type == 0">
      <div
        class="px-3 row px-xl-5 px-sm-4 flex mx-0 justify-content-center my-2"
      >
        <div
          style="width: 114px; height: 99px"
          class="btn btn-outline-light flex justify-content-center py-0"
          @click="type = '1'"
        >
          <div
            class="justify-content-center align-items-center w-100 h-100 flex-column"
            style="display: flex"
          >
            <img
              :src="require('@/assets/icon/freeIcon.png')"
              class="avatar-md"
              alt=""
            />
            <div
              class="mt-1 text-secondary text-capitalize"
              style="font-size: 16px; font-weight: 400"
            >
              Free
            </div>
          </div>
        </div>
        <div
          style="width: 114px; height: 99px; margin-left: 24px"
          class="btn btn-outline-light flex justify-content-center py-0"
        >
          <div
            class="justify-content-center align-items-center w-100 h-100 flex-column"
            style="display: flex"
          >
            <img
              :src="require('@/assets/icon/premiumIcon.png')"
              class="avatar-md"
              alt=""
            />
            <div
              class="mt-1 text-secondary text-capitalize"
              style="font-size: 16px; font-weight: 400"
            >
              Premium
            </div>
          </div>
        </div>
      </div>
      <div class="mb-2 text-center position-relative">
        <p
          class="px-3 mb-2 text-sm bg-white font-weight-bold text-secondary text-border d-inline z-index-2"
        >
          or
        </p>
      </div>
      <div class="text-center">
        <soft-button
          class="mt-2 mb-4"
          variant="gradient"
          color="dark"
          full-width
          @click="dialogVisible = false"
          >SIGN IN
        </soft-button>
      </div>
      <div class="text-xs text-center text-secondary">
        If you are already a subscriber to Tradingsignal.ai. Please click the
        button to sign in
      </div>
    </div>
    <div v-if="type == 1">
      <label for="email" class="form-label text-sm font-weight-normal"
        >E-Mail</label
      >
      <input
        id="email"
        v-model="email"
        type="email"
        class="form-control"
        :class="{ 'is-invalid': emailFailed }"
        placeholder="Email"
        autocomplete="off"
        @blur="email_blur"
      />
      <p v-if="emailFailed" class="text-danger text-xs mt-1">
        <!-- 请输入正确的邮箱地址 -->
        {{ "Please enter the correct email address" }}
      </p>
      <div
        class="text-xs text-center text-secondary mt-1"
        style="text-align: left !important"
      >
        Please enter your e-mail to sign up for Tradingsignal.ai.
      </div>
      <div style="margin-top: 40px">
        <soft-button
          class=""
          variant="gradient"
          color="dark"
          full-width
          :disabled="loading"
          @click="signUp(1)"
        >
          Sign up
        </soft-button>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button> -->
      </div>
    </template>
  </el-dialog>
</template>

<script>
import SoftButton from "@/components/SoftButton.vue";
import { subscribe } from "@/request/api.js";
export default {
  components: {
    SoftButton,
  },
  data() {
    return {
      dialogVisible: false,
      type: "0",
      emailFailed: false, //邮箱格式错误
      loading: false,
      email: "",
    };
  },
  methods: {
    //邮箱验证
    email_blur() {
      if (!this.email) {
        // 值为空就return
        return;
      }
      //   console.log(this.email,verify.test(this.email));
      let verify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
      if (!verify.test(this.email)) {
        this.emailFailed = true;
      } else {
        this.emailFailed = false;
      }
    },
    // 订阅
    async signUp(type) {
      if (this.emailFailed || this.email == "") {
        this.emailFailed = true;
        return;
      }
      let params = {
        email: this.email,
      };
      if (type == 1) {
        //免费
        this.loading = true
        const res = await subscribe(params);
        this.loading = false
        if (res.code !== 200) {
          this.$message.error(res.msg);
          return;
        }
        this.$store.commit("app/upToken", res.data.token);
        await this.$store.dispatch("app/setAccount");

        this.$swal
          .fire({
            title: "Congrats!",
            html: `Your Plan has been activated.<br>Your account is: $$`,
            icon: "success",
            confirmButtonText: "Go to Project Library",
          })
          .then(() => {
            this.$router.push("/projects");
          });
        this.handleClose();
      }
    },
    handleClose() {
      this.dialogVisible = false;
      this.email = "";
      this.emailFailed = false;
      this.type = "0";
    },
  },
};
</script>

<style></style>
